<template>
  <div v-if="modelValue" :class="['file-detail', detailAnimation ? 'detail-open' : 'detail-close']">
    <!-- 详细信息头部 -->
    <div class="detail-header">
      <div class="header-left">
        <h3 class="detail-title">详细信息</h3>
        <span class="file-name">{{ fileInfo.fileName }}</span>
      </div>
      <div class="header-right">
        <el-button @click="closeDetail" circle>
          <el-icon>
            <Close />
          </el-icon>
        </el-button>
      </div>
    </div>

    <!-- 详细信息内容区域 -->
    <div class="detail-content">
      <div class="file-info-container">
        <!-- 文件图标 -->
        <div class="file-icon-section">
          <FileTypeIcon :fileType="fileInfo.fileType" />
        </div>
      
        <!-- 文件基本信息 -->
        <div class="file-basic-info">
          <div class="info-item">
            <span class="info-label">类型：</span>
            <span class="info-value">{{ getFileTypeText(fileInfo.fileType) }}</span>
          </div>
          
          <div class="info-item">
            <span class="info-label">位置：</span>
            <span class="info-value">{{ fileInfo.filePath || '我的网盘/测试' }}</span>
          </div>
          
          <div class="info-item">
            <span class="info-label">大小：</span>
            <span class="info-value">{{ formatFileSize(fileInfo.fileSize) }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">创建时间：</span>
            <span class="info-value">{{fileInfo.createTime}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { Close } from '@element-plus/icons-vue'
import FileTypeIcon from './FileTypeIcon.vue'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  fileInfo: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(['update:modelValue'])
const detailAnimation = ref(false)

// 关闭详细信息弹窗
const closeDetail = () => {
  detailAnimation.value = false
  setTimeout(() => {
    emit('update:modelValue', false)
  }, 300)
}
// 监听弹窗显示状态
watch(() => props.modelValue, (newVal) => {
  detailAnimation.value = newVal
})

// 获取文件类型显示文本
const getFileTypeText = (fileType) => {
  const typeMap = {
    'doc': 'doc文件',
    'pdf': 'PDF文件',
    'image': '图片文件',
    'video': '视频文件',
    'audio': '音频文件',
    'folder': '文件夹',
    'txt': '文本文件',
    'zip': '压缩文件',
    'excel': 'Excel文件',
    'ppt': 'PPT文件',
    'word': 'Word文件'
  }
  return typeMap[fileType] || '未知文件类型'
}

// 格式化文件大小
const formatFileSize = (size) => {
  if (!size) return '0B'
  const units = ['B', 'KB', 'MB', 'GB', 'TB']
  let unitIndex = 0
  let fileSize = parseFloat(size)
  while (fileSize >= 1024 && unitIndex < units.length - 1) {
    fileSize /= 1024
    unitIndex++
  }
  return `${fileSize.toFixed(2)}${units[unitIndex]}`
}
</script>

<style lang="scss" scoped>
.file-detail {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  width: 800px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.05);
  overflow: hidden;

  /* 弹窗打开动画 - 从小缩放 */
  &.detail-open {
    animation: scaleIn 0.3s ease-out forwards;
  }

  /* 弹窗关闭动画 - 缩小消失 */
  &.detail-close {
    animation: scaleOut 0.3s ease-in forwards;
  }
  @media (max-width: 768px) {
    width: 100%;
    height: 100%;
    border-radius: 0;
    box-shadow: none;
    overflow: auto;
  }

  /* 缩放进入动画 */
  @keyframes scaleIn {
    0% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.8);
    }

    100% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }
  }

  /* 缩放退出动画 */
  @keyframes scaleOut {
    0% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }

    100% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.8);
    }
  }
}

.detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e0e0e0;
  background: #fafafa;

  .header-left {
    display: flex;
    align-items: center;
    gap: 16px;

    .detail-title {
      font-size: 16px;
      font-weight: 600;
      color: #333;
      margin: 0;
    }

    .file-name {
      font-size: 14px;
      color: #666;
      max-width: 250px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .header-right {
    display: flex;
    align-items: center;
  }
}

.detail-content {
  flex: 1;
  overflow: auto;
  padding: 24px;
  background-color: #fff;
}

.file-info-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.file-icon-section {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 2px dashed #e0e0e0;

  :deep(.item-cover-img) {
    width: 80px;
    height: 80px;
  }
}

.file-basic-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.info-item {
  display: flex;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;

  &:last-child {
    border-bottom: none;
  }

  .info-label {
    font-weight: 500;
    color: #666;
    min-width: 80px;
    flex-shrink: 0;
  }

  .info-value {
    color: #333;
    word-break: break-all;
    flex: 1;

    &.file-url {
      color: #409eff;
      cursor: pointer;
      text-decoration: underline;
      
      &:hover {
        color: #66b1ff;
      }
    }
  }
}
</style>
